{% extends "base.html" %}

{% block title %}师生关系详情 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}师生关系详情{% endblock %}

{% block extra_css %}
<style>
    .detail-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .relation-status {
        display: inline-block;
        padding: 6px 16px;
        border-radius: 16px;
        font-weight: 500;
        font-size: 14px;
    }

    .status-pending {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }

    .status-approved {
        background-color: #d1edff;
        color: #0c5460;
        border: 1px solid #b8daff;
    }

    .status-rejected {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .timeline {
        position: relative;
        padding-left: 30px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #dee2e6;
    }

    .timeline-item {
        position: relative;
        margin-bottom: 20px;
        background: white;
        border-radius: 6px;
        padding: 15px;
        border: 1px solid #e9ecef;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: -23px;
        top: 20px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #007bff;
        border: 3px solid white;
        box-shadow: 0 0 0 1px #dee2e6;
    }

    .timeline-item.success::before {
        background: #28a745;
    }

    .timeline-item.warning::before {
        background: #ffc107;
    }

    .timeline-item.danger::before {
        background: #dc3545;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
    }

    .user-info {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 500;
        color: #495057;
    }

    .info-value {
        color: #6c757d;
    }

    .action-card {
        background: #fff5f5;
        border: 1px solid #fed7d7;
        border-radius: 8px;
        padding: 15px;
        margin-top: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 返回按钮 -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{{ url_for('relations.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> 返回关系列表
            </a>
        </div>
    </div>

    <!-- 关系基本信息 -->
    <div class="row">
        <div class="col-md-8">
            <div class="detail-card">
                <div class="d-flex justify-content-between align-items-start mb-4">
                    <h5 class="mb-0">关系基本信息</h5>
                    <span class="relation-status status-{{ relation_data.relation.status }}">
                        {% if relation_data.relation.status == 'pending' %}待审核
                        {% elif relation_data.relation.status == 'approved' %}已同意
                        {% elif relation_data.relation.status == 'rejected' %}已拒绝
                        {% endif %}
                    </span>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="user-info">
                            <div class="mb-3">
                                {% if relation_data.relation.student.photo_url %}
                                    <img src="{{ relation_data.relation.student.photo_url }}"
                                         alt="学员头像" class="user-avatar">
                                {% else %}
                                    <div class="user-avatar bg-primary d-flex align-items-center justify-content-center text-white">
                                        <i class="bi bi-person"></i>
                                    </div>
                                {% endif %}
                            </div>
                            <h6 class="text-primary">学员信息</h6>
                            <div class="info-item">
                                <span class="info-label">姓名</span>
                                <span class="info-value">{{ relation_data.relation.student.real_name }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">手机</span>
                                <span class="info-value">{{ relation_data.relation.student.phone }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">性别</span>
                                <span class="info-value">
                                    {% if relation_data.relation.student.gender == 'male' %}男
                                    {% elif relation_data.relation.student.gender == 'female' %}女
                                    {% else %}未设置
                                    {% endif %}
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">年龄</span>
                                <span class="info-value">{{ relation_data.relation.student.age or '未设置' }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">所属校区</span>
                                <span class="info-value">{{ relation_data.relation.student.campus.name }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="user-info">
                            <div class="mb-3">
                                {% if relation_data.relation.coach.photo_url %}
                                    <img src="{{ relation_data.relation.coach.photo_url }}"
                                         alt="教练头像" class="user-avatar">
                                {% else %}
                                    <div class="user-avatar bg-success d-flex align-items-center justify-content-center text-white">
                                        <i class="bi bi-person-check"></i>
                                    </div>
                                {% endif %}
                            </div>
                            <h6 class="text-success">教练信息</h6>
                            <div class="info-item">
                                <span class="info-label">姓名</span>
                                <span class="info-value">{{ relation_data.relation.coach.real_name }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">手机</span>
                                <span class="info-value">{{ relation_data.relation.coach.phone }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">性别</span>
                                <span class="info-value">
                                    {% if relation_data.relation.coach.gender == 'male' %}男
                                    {% elif relation_data.relation.coach.gender == 'female' %}女
                                    {% else %}未设置
                                    {% endif %}
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">教学等级</span>
                                <span class="info-value">{{ relation_data.relation.coach.level or '未设置' }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">所属校区</span>
                                <span class="info-value">{{ relation_data.relation.coach.campus.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 关系详细信息 -->
                <div class="mt-4">
                    <h6>关系详情</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item">
                                <span class="info-label">申请时间</span>
                                <span class="info-value">
                                    {{ relation_data.relation.applied_at.strftime('%Y-%m-%d %H:%M') }}
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">处理时间</span>
                                <span class="info-value">
                                    {% if relation_data.relation.responded_at %}
                                        {{ relation_data.relation.responded_at.strftime('%Y-%m-%d %H:%M') }}
                                    {% else %}
                                        未处理
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <span class="info-label">关系持续</span>
                                <span class="info-value">
                                    {% if relation_data.relation.status == 'approved' %}
                                        {{ relation_data.duration_days }} 天
                                    {% else %}
                                        -
                                    {% endif %}
                                </span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">跨校区关系</span>
                                <span class="info-value">
                                    {% if relation_data.relation.student.campus_id != relation_data.relation.coach.campus_id %}
                                        <span class="text-warning">是</span>
                                    {% else %}
                                        否
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 申请说明 -->
                {% if relation_data.relation.apply_note %}
                <div class="mt-4">
                    <h6>申请说明</h6>
                    <div class="bg-light p-3 rounded">
                        {{ relation_data.relation.apply_note }}
                    </div>
                </div>
                {% endif %}

                <!-- 处理说明 -->
                {% if relation_data.relation.response_note %}
                <div class="mt-4">
                    <h6>处理说明</h6>
                    <div class="bg-light p-3 rounded">
                        {{ relation_data.relation.response_note }}
                    </div>
                </div>
                {% endif %}

                <!-- 管理员操作 -->
                {% if relation_data.relation.status == 'approved' %}
                <div class="action-card">
                    <h6 class="text-danger">
                        <i class="bi bi-exclamation-triangle"></i> 管理员操作
                    </h6>
                    <p class="text-muted mb-3">
                        作为管理员，您可以强制终止此师生关系。此操作不可撤销，请谨慎操作。
                    </p>
                    <button type="button" class="btn btn-danger btn-sm"
                            onclick="showTerminateModal()">
                        <i class="bi bi-x-circle"></i> 强制终止关系
                    </button>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 关系时间线 -->
        <div class="col-md-4">
            <div class="detail-card">
                <h5 class="mb-4">关系时间线</h5>
                <div class="timeline">
                    {% for event in relation_data.timeline %}
                    <div class="timeline-item {{ event.type }}">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <strong class="text-{{ event.type }}">{{ event.title }}</strong>
                            <small class="text-muted">{{ event.time }}</small>
                        </div>
                        <div class="text-muted">
                            {{ event.description }}
                        </div>
                        {% if event.operator %}
                        <div class="mt-1">
                            <small class="text-muted">
                                操作人：{{ event.operator }}
                            </small>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- 相关统计 -->
            {% if relation_data.stats %}
            <div class="detail-card">
                <h6 class="mb-3">相关统计</h6>
                <div class="info-item">
                    <span class="info-label">学员总教练数</span>
                    <span class="info-value">{{ relation_data.stats.student_total_coaches }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">教练总学员数</span>
                    <span class="info-value">{{ relation_data.stats.coach_total_students }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">同校区关系数</span>
                    <span class="info-value">{{ relation_data.stats.same_campus_relations }}</span>
                </div>
                {% if relation_data.stats.total_lessons %}
                <div class="info-item">
                    <span class="info-label">共同课程数</span>
                    <span class="info-value">{{ relation_data.stats.total_lessons }}</span>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 强制终止关系模态框 -->
<div class="modal fade" id="terminateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">强制终止师生关系</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle"></i>
                    您确定要强制终止 <strong>{{ relation_data.relation.student.real_name }}</strong> 与
                    <strong>{{ relation_data.relation.coach.real_name }}</strong> 的师生关系吗？
                </div>
                <div class="alert alert-warning">
                    <small>
                        此操作将立即终止师生关系，双方将收到系统通知。
                        如果存在未完成的课程或预约，请先妥善处理。
                    </small>
                </div>
                <form id="terminateForm">
                    <div class="mb-3">
                        <label class="form-label">终止原因 <span class="text-danger">*</span></label>
                        <textarea name="reason" class="form-control" rows="4"
                                  placeholder="请详细说明强制终止该师生关系的原因，此信息将记录在系统中并通知相关用户..." required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="confirmTerminate()">
                    确认终止
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 显示终止模态框
function showTerminateModal() {
    const modal = new bootstrap.Modal(document.getElementById('terminateModal'));
    modal.show();
}

// 确认终止关系
function confirmTerminate() {
    const form = document.getElementById('terminateForm');
    const formData = new FormData(form);

    if (!formData.get('reason').trim()) {
        alert('请填写终止原因');
        return;
    }

    const relationId = {{ relation_data.relation.id }};

    fetch(`/relations/terminate/${relationId}`, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': document.querySelector('meta[name=csrf-token]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('师生关系已成功终止');
            location.reload();
        } else {
            alert('操作失败：' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('操作失败，请重试');
    });
}
</script>
{% endblock %}